import { GoToDocsButton } from '../component/GoToDocsButton';

<GoToDocsButton
  href="https://tolgee.io/js-sdk/integrations/angular/installation"
  style={{ float: 'right' }}
/>

To read full documentation about Tolgee for Angular, visit [docs](https://tolgee.io/js-sdk/integrations/angular/installation).

## Install packages

```sh
npm install @tolgee/ngx
```

## Setup environment

Add Tolgee properties to your `src/environments/environment.<your env>.ts`

```typescript
export const environment = {
  production: false,
  tolgeeApiUrl: '{{{apiUrl}}}',
  tolgeeApiKey: '{{{apiKey}}}',
};
```

## Setup NgModule

Add NgxTolgeeModule to the imports section.

```typescript
import {
  DevTools,
  NgxTolgeeModule,
  Tolgee,
  TOLGEE_INSTANCE,
  FormatSimple
} from '@tolgee/ngx';

...
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    NgxTolgeeModule,
    ...
  ],
  providers: [
    {
      provide: TOLGEE_INSTANCE,
      useFactory: () => {
        return Tolgee()
          .use(DevTools())
          .use(FormatSimple())
          .init({
            language: 'en'

            // for development
            apiUrl: environment.tolgeeApiUrl,
            apiKey: environment.tolgeeApiKey,

            // for production
            staticData: {
              ...
            }
          });
      },
    },
  ],
  ...
})
export class AppModule {}
```

Maybe you will also need to set `skipLibCheck` to `true` in your `compilerOptions` section of `tsconfig.json`.

## Use Tolgee!

```html
<div t key="hello_world"></div>
```

or

```html
<h1>{{'hello_world' | translate}}</h1>
```

or

```typescript
this.translateService
  .get('hello_world')
  .subscribe((r) => (this.helloWorld = r));
```

## Prepare for production

To prepare your App for production, choose a suitable option described
[here](https://tolgee.io/js-sdk/integrations/angular/installation#preparing-for-production).
